<template>
	<view>
		<view class='return-list pad30' v-if="orderList.length">
			<view class='goodWrapper borRadius14' v-for="(item,index) in orderList" :key="index"
				@click='goOrderDetails(item.orderId)'>
				<!-- <view class='iconfont1 iconfont icon-tuikuanzhong powder' v-if="item.refundStatus==1 || item.refundStatus==3">
				</view>
				<view class='iconfont1 iconfont icon-yituikuan' v-if="item.refundStatus==2"></view> -->
				<template v-if="false">
					<view class='orderNum'>退货商品(共1件)</view>
					<view class='item acea-row row-between-wrapper' v-for="(items,index) in item.orderInfoList"
						:key="index">
						<view class='pictrue'>
							<image :src='items.image'></image>
						</view>
						<view class='text'>
							<view class='acea-row row-between-wrapper'>
								<view class='name line1'>{{items.storeName}}</view>
								<view class='num'>x {{items.cartNum}}</view>
							</view>
							<view class='attr line1' v-if="items.suk">{{items.suk}}</view>
							<view class='attr line1' v-else>{{items.storeName}}</view>
							<view class='money'>￥{{items.price}}</view>
						</view>
					</view>
					<view class='totalSum'> <text class='font-color price'>￥{{item.payPrice}}</text></view>
				</template>
				<template v-else>
					<view class='orderNum'>退货商品(共3件)</view>
					<view class="index-coupon">
						<scroll-view scroll-x="true" class="index-coupon-view">
							<view class="index-coupon-msg" 
								v-for="(item,index) in 5" :key="index">
								<view class="index-coupon-msg-wrap">
									<view class="index-coupon-msg-left">
										<image src="../../../static/logo.png" mode=""></image>
									</view>
					
									<view class="index-coupon-msg-center">
										<view class="index-coupon-msg-center-up">￥120</view>
										
									</view>
						
								</view>
					
							</view>
						</scroll-view>
					</view>
					
					
		<!-- 			<view class='item acea-row row-between-wrapper' v-for="(items,index) in item.orderInfoList"
						:key="index">
						<view class='pictrue'>
							<image :src='items.image'></image>
						</view>
						<view class='text'>
							<view class='acea-row row-between-wrapper'>
								<view class='name line1'>{{items.storeName}}</view>
								<view class='num'>x {{items.cartNum}}</view>
							</view>
							<view class='attr line1' v-if="items.suk">{{items.suk}}</view>
							<view class='attr line1' v-else>{{items.storeName}}</view>
							<view class='money'>￥{{items.price}}</view>
						</view>
					</view>
					<view class='totalSum'> <text class='font-color price'>￥{{item.payPrice}}</text></view> -->
				</template>
				
			</view>
		</view>
		<view class='return-list pad30'>
			<view class='goodWrapper borRadius14'>

				<view class='orderNum'>退款信息</view>
				<view class="return-list-msg">

					<view class="dis return-list-msg-list">
						<view class="return-list-msg-list-left dis" style="align-items: center;">
							<view class="return-list-msg-list-left-img">
								*
							</view>
							<view class="return-list-msg-list-left-des">
								<picker style="width: 400rpx;padding: 20rpx;" @change="bindPickerChange" :value="index"
									:range="array">
									<view class="uni-input">{{array[index]||'请选择退款原因'}}</view>
								</picker>
							</view>
						</view>
						<view class="return-list-msg-list-right">
							<image src="@/static/com/icon_more.png" mode=""></image>
						</view>
					</view>
					<view class="dis return-list-msg-list">
						<view class="return-list-msg-list-left dis">
							<view class="return-list-msg-list-left-img">
								*
							</view>
							<view class="return-list-msg-list-left-des" style="padding: 0 11rpx;">

								<view class="return-list-msg-list-left-des-top">退款金额</view>
								<view class="return-list-msg-list-left-des-center">$520</view>
								<view class="return-list-msg-list-left-des-bom">金额不可修改,最多退¥580,含运费¥10</view>
							</view>
						</view>
						<view class="return-list-msg-list-right">

						</view>
					</view>

				</view>
			</view>
		</view>
		<view class='return-list pad30'>
			<view class='goodWrapper borRadius14'>

				<view class='orderNum'>补充描述和凭证</view>
				<view class="return-list-msg">

					<view class="dis return-list-msg-list">
						<textarea name="" id="" placeholder="补充描述,有助于我们可以更好的处理售后问题" cols="30" rows="10"></textarea>
					</view>


				</view>
			</view>
		</view>
		<view class='return-list pad30'>
			<view class='goodWrapper borRadius14'>
				<view class='orderNum'>添加图片</view>
				<view class=' ' style="border: none;">
					
					<view class='sctp'>
						<view class='pictrue' v-for="(item,index) in 6" :key="index">
							<!-- <image src="../../../static/logo.png" mode=""></image> -->
							<image :src='item'></image>
							<view class='iconfont icon-guanbi1 font-color' @tap='DelPic(index)'></view>
						</view>
						<view class='sctp-msg' @tap='uploadpic'
							v-if="refund_reason_wap_imgPath.length < 6">
							<text class='iconfont icon-icon25201'></text>
							<view>上传凭证</view>
							<view class="">
								最多6张
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>

		<view class='loadingicon acea-row row-center-wrapper' v-if="orderList.length">
			<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
		</view>
		<view v-if="orderList.length == 0">
			<emptyPage title="暂无订单~"></emptyPage>
		</view>
		<!-- #ifdef MP -->
		<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
		<!-- #endif -->
		<home></home>
		<view class="" style="height: 120rpx;">
			
		</view>
		<view class="footer">
			<view class="footer-btn" @click="submit">
				提交
			</view>
		
		</view>
	</view>
</template>

<script>
	import home from '@/components/home';
	import emptyPage from '@/components/emptyPage.vue'
	import {
		getOrderList
	} from '@/api/order.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	export default {
		components: {
			emptyPage,
			home,
			// #ifdef MP
			authorize
			// #endif
		},
		data() {
			return {
				refund_reason_wap_img: [],
				refund_reason_wap_imgPath: [],
				array: ['中国', '美国', '巴西', '日本'],
				index: '',
				loading: false,
				loadend: false,
				loadTitle: '加载更多', //提示语
				orderList: [], //订单数组
				orderStatus: -3, //订单状态
				page: 1,
				limit: 20,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false //是否隐藏授权
			};
		},
		computed: mapGetters(['isLogin']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						this.getOrderList();
					}
				},
				deep: true
			}
		},
		onLoad() {
			if (this.isLogin) {
				this.getOrderList();
			} else {
				toLogin();
			}
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			this.getOrderList();
		},
		methods: {
			DelPic:function(e){
			  let index = e, that = this;
			  that.refund_reason_wap_imgPath.splice(index, 1);
			},
			uploadpic:function(){
			  let that=this;
			  that.$util.uploadImageOne({url:'user/upload/image',name:'multipart', model:"product", pid:1}, function(res){
				  that.refund_reason_wap_imgPath.push(res.data.url);
			  });
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},

			onLoadFun() {
				this.getOrderList();
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			/**
			 * 去订单详情
			 */
			goOrderDetails: function(order_id) {
				if (!order_id) return that.$util.Tips({
					title: '缺少订单号无法查看订单详情'
				});
				uni.navigateTo({
					url: '/pagesB/shoppingMall/info?order_id=' + order_id + '&isReturen=1'
				})
			},

			/**
			 * 获取订单列表
			 */
			getOrderList: function() {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = "";
				getOrderList({
					type: that.orderStatus,
					page: that.page,
					limit: that.limit,
				}).then(res => {
					let list = res.data.list || [];
					let loadend = list.length < that.limit;
					that.orderList = that.$util.SplitArray(list, that.orderList);
					that.$set(that, 'orderList', that.orderList);
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? "我也是有底线的" : '加载更多';
					that.page = that.page + 1;
				}).catch(err => {
					that.loading = false;
					that.loadTitle = "加载更多";
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-coupon {
		margin-top: 20rpx;
		.index-coupon-view {
			white-space: nowrap;
			width: 640rpx;
		}
	
		width: 100%;
		height: 200rpx;
	
		.index-coupon-msg {
			background-size: 100% 100%;
			display: inline-block;
			// width: 80%;
			height: 180rpx;
	
			border-radius: 20rpx;
			opacity: 1;
			margin-right: 20px;
		
			.index-coupon-msg-wrap {
				display: flex;
				    justify-content: space-between;
				    align-items: center;
				    flex-direction: column;
				    height: 100%;
				    /* width: 510rpx; */
				   
				.index-coupon-msg-bom {
					width: 30rpx;
					font-size: 28rpx;
					color: $maincolor;
					padding: 10rpx 0;
					writing-mode: vertical-lr;
					/*从左向右 从右向左是 writing-mode: vertical-rl;*/
					writing-mode: tb-lr;
					/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
				}
	
				.index-coupon-msg-center {
					.index-coupon-msg-center-up {
						font-size: 28rpx;
					}
	
					.index-coupon-msg-center-bom {
						font-size: 20rpx;
						background: #C1C1C1;
						border-radius: 100rpx;
						opacity: 1;
						text-align: center;
						margin-top: 20rpx;
						color: #fff;
					}
				}
	
				.index-coupon-msg-left {
					width: 170rpx;
					height: 170rpx;
					    margin: 6rpx auto;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
	
		}
	}
	
	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		background: #fff;
		z-index: 1000;
		padding: 30rpx 0;
	
		.footer-btn {
			width: 90%;
			margin: 0 auto;
			font-size: 28rpx;
			line-height: 80rpx;
			border-radius: 100rpx;
			background: $maincolor;
			text-align: center;
			color: #fff;
		}
	}
.pictrue image{width:100%;height:100%;border-radius:14rpx;}
.icon-guanbi1{position:absolute;font-size:30rpx!important;top:-10rpx;right:-10rpx;}
	.pictrue{border-radius: 14rpx; margin:22rpx 23rpx 0 0;width:156rpx;height:156rpx;position:relative;font-size:24rpx;color:#bbb;}
.sctp{
	
		display: flex;
		    flex-wrap: wrap;
		
		.sctp-msg{
			display: flex;
			flex-direction: column;
			.iconfont {
				position: none!important;
			}

		}
}
	.return-list-msg {
		padding: 40rpx 0;

		.return-list-msg-list {
			textarea {
				width: 100%;
				font-size: 24rpx;
			
			}

			justify-content: space-between;
			align-items: center;

			.return-list-msg-list-right {
				width: 30rpx;
				height: 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.return-list-msg-list-left {
				margin-left: 20rpx;

				.return-list-msg-list-left-img {

					color: red;

				}

				.return-list-msg-list-left-des {
					.return-list-msg-list-left-des-top {
						color: #999;
						font-size: 28rpx;
					}

					.return-list-msg-list-left-des-center {
						font-size: 36rpx;
						color: $maincolor;
					}

					.return-list-msg-list-left-des-bom {
						font-size: 24rpx;
						color: #999;
					}

					.return-list-msg-list-left-des-left {
						font-size: 28rpx;
						color: #000;
					}

					.return-list-msg-list-left-des-right {
						font-size: 24rpx;
						color: #999;
					}
				}

			}
		}
	}

	.return-list .goodWrapper {
		background-color: #fff;
		margin-top: 20rpx;
		position: relative;
		padding: 0rpx 24rpx;
	}

	.return-list .goodWrapper .orderNum {
		border-bottom: 1px solid #eee;
		height: 87rpx;
		line-height: 87rpx;
		font-size: 30rpx;
		color: #333333;
	}

	.return-list .goodWrapper .item {
		border-bottom: 0;
	}

	.return-list .goodWrapper .totalSum {
		padding: 0 30rpx 32rpx 30rpx;
		text-align: right;
		font-size: 26rpx;
		color: #282828;
	}

	.return-list .goodWrapper .totalSum .price {
		font-size: 28rpx;
		font-weight: bold;
	}

	.return-list .goodWrapper .iconfont {
		// position: absolute;
		font-size: 109rpx;
		top: 7rpx;
		right: 22rpx;
		color: #ccc;
	}

	.return-list .goodWrapper .iconfont.powder {
		color: #f8c1bd;
	}
</style>